<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
<script>
// pid是parentId的简写,父id
let list = [
  {id: 1, name: '节点1', pid: ''},
  {id:11, name: '节点1-1', pid: 1},
  {id:111, name: '节点1-1-1', pid: 11},
  {id:12, name: '节点1-2', pid: 1},
  {id: 2, name: '节点2', pid: ''}
]
// 转换方式1 - 不用递归,递归在面试当中讲出来
// 找children
// list.forEach(item=>{
//   let children = list.filter(obj=>obj.pid=== item.id)
//   if(children.length > 0){
//     item.children = children
//   }
// })
// // 找第一级的节点
// let res = list.filter(item=>item.pid ==='')
// console.log(res);

// 转换方式2.2 -- 用递归, 多传参数 避免用全局数据
// 关键是子节点的pid等于父节点的id
function translateListToTree(list,pid){
  let arr = []
  list.forEach(item=>{
      // 右侧的pid是传入的参数  第一次是''
    if(item.pid === pid){
      // 找到之后, 就要去找item下面有没有子节点
      let children = translateListToTree(list,item.id)
      //第二次调用的时候 父节点pid一定是要换成item.id 这样就不会导致死循环了
      if(children.length > 0) {
        // 如果children的长度大于0.说明找到了子节点
        item.children = children
      }
      arr.push(item)  // 将内容加入到数组中
    }
  })
  return arr
}
let res1 = translateListToTree(list,'')
console.log(res1);
</script>
</html>
